<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
		<style>
		.wrapper {
			width: 540px;
			height: 310px;
			background-color: #a1ca6c;
			padding-top: 37px;
		}
		.out {
			width: 380px;
			height: 100px;
			margin: 0 auto;
			background-color: #84a659;
		}
		p {
			width: 270px;
			padding: 15px;
			color: white;
			margin: 0 auto;
		}
		.in {
			width: 300px;
			height: 32px;
			margin: 0 auto;
			position: relative;
		}
		select {
			width: 100%;
			height: 100%;
			border-radius: 3px;
			background-color: #546a39;
			padding-left: 15px;
			color: white;
			-webkit-appearance: none; 
		}
		.thr {
			width: 9px;
			position: absolute;
			right: 10px;
			top: 12px;
		}
		.thr > div {
			height: 2px;
			margin-bottom: 1px;
			background-color: white;
		}
		option {
			background-color: white;
			color: #68727b;
		}

	</style>

</head>
<body>
	<div class = "wrapper">
		
		<div class = "out">

			<div class="in">
				<select name="web" id="sel">
					<option value="html">HTML</option>
					<option value="css">CSS3</option>
					<option value="js">JavaScript</option>
					<option value="jq">jQuery</option>
				</select>
				<div class = "thr">
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
		</div>

		<p><span>你想学：</span><span class = "info"></span></p>
		
	</div>

</body>
<script>
	var sel = document.querySelector("#sel");
	var opts = document.querySelectorAll("option");
	var info = document.querySelector(".info");

	sel.onchange = function(){

		for(var i =0;i<opts.length;i++){

			if(opts[i].selected == true){

				info.innerHTML = opts[i].innerText;
				
			}
		}
	}
</script>
</html>